<template>
    <DialogComponent class="custom-dialog" :layer="dialogParams" @update:visible="closeRoleDialog" @confirm="confirmRoleDialog(ruleFormRef)">
        <div>
            <el-form ref="ruleFormRef" :model="roleInfo" :rules="rules" :label-width="labelWidth" status-icon class="demo-form-inline">
                <el-form-item label="角色名称" prop="roleName">
                    <el-col :span="24">
                        <el-input v-model="roleInfo.roleName" placeholder="请输入角色名称（例如：中台管理员）" maxlength="200" :disabled="!!roleInfo.id" clearable/>
                    </el-col>
                </el-form-item>
                <el-form-item label="角色代码" prop="roleCode">
                    <el-col :span="24">
                        <el-input v-model="roleInfo.roleCode" placeholder="请输入角色代码（例如：wand-admin)" maxlength="200" :disabled="!!roleInfo.id" clearable/>
                    </el-col>
                </el-form-item>
                <el-form-item label="状态">
                    <el-col :span="24">
                        <el-radio-group v-model="roleInfo.enabled" class="ml-4">
                            <el-radio :label="true">启用</el-radio>
                            <el-radio :label="false">禁用</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>
                <el-form-item label="角色描述">
                    <el-col :span="24">
                        <el-input type="textarea" v-model="roleInfo.comments" maxlength="200" show-word-limit placeholder="请描述角色（选填）" />
                    </el-col>
                </el-form-item>
            </el-form>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import DialogComponent from '@/components/dialogComp.vue'
import { deepCopy } from '@/lib/tools.js';
export default {
    components: { DialogComponent },
    props: {
        dialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        role: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const store = useStore()
        const ruleFormRef = ref()
        const labelWidth = ref('90px')
        const { role } = toRefs(props)
        console.log('role', role, role.value)
        const roleInfo = reactive(role.value?deepCopy(role.value):{
            roleName: '',
            roleCode: '',
            enabled: true,
            comments: ''
        })
        const validateCode = (rule, value, callback) => {
            const reg = /[\u4E00-\u9FA5]/g
            if (value&&reg.test(value)) {
                callback(new Error('请输入非中文格式的角色代码'))
            } else {
                callback()
            }
        }
        const rules = reactive({
            roleName: [
                { required: true, message: '请输入角色名称', trigger: 'blur' }
            ],
            roleCode: [
                {
                    required: true,
                    message: '请输入角色代码',
                    trigger: 'change'
                },
                { validator: validateCode, trigger: 'blur' }
            ]
        })
        // 新建角色
        const addRole = () => {
            store.dispatch('proxyAction', {
                name: 'wandAddRole',
                data: {
                    ...roleInfo,
                    clientChannelCode: 5
                }
            }).then((res) => {
                store.dispatch('message', {
                    message: '角色创建成功'
                })
                ctx.emit('dialog:confirm')
            }, (error) => {
                console.log('error', error)
            })
        }
        // 编辑角色
        const editRole = () => {
            store.dispatch('proxyAction', {
                name: 'wandEditRole',
                data: {
                    ...roleInfo,
                    clientChannelCode: 5
                }
            }).then((res) => {
                store.dispatch('message', {
                    message: '角色编辑成功'
                })
                ctx.emit('dialog:confirm')
            }, (error) => {
                console.log('error', error)
            })
        }
        // 关闭添加账号对话框
        const closeRoleDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmRoleDialog = (formEl) => {
            formEl.validate((valid, fields) => {
                console.log('valid', valid)
                if (valid) {
                    if (roleInfo.id) {
                        editRole()
                    } else {
                        addRole()
                    }
                } else {
                    console.log('error submit!', fields)
                }
            })
            // props.dialogParams.value.show = false;
            // ctx.emit('dialog:confirm')
        }
        return {
            ruleFormRef,
            labelWidth,
            roleInfo,
            rules,
            closeRoleDialog,
            confirmRoleDialog
        };
    }
}
</script>
<style scoped>
.pl12 {
    padding-left: 12px;
}
.c-999 {
    color: #999;
}
</style>